<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>应用加载中...</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      color: #333;
    }
    .loading-container {
      text-align: center;
      padding: 20px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      max-width: 400px;
    }
    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 20px;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .loading-text {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .loading-subtext {
      font-size: 14px;
      color: #666;
    }
    .error-message {
      color: #e74c3c;
      margin-top: 20px;
      padding: 10px;
      background-color: #fadbd8;
      border-radius: 4px;
      display: none;
    }
    .retry-button {
      margin-top: 15px;
      padding: 8px 16px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: none;
    }
    .retry-button:hover {
      background-color: #2980b9;
    }
  </style>
</head>
<body>
  <div class="loading-container">
    <div class="loading-spinner"></div>
    <div class="loading-text">应用加载中...</div>
    <div class="loading-subtext">请稍候，正在初始化应用</div>
    <div class="error-message" id="errorMessage"></div>
    <button class="retry-button" id="retryButton">重试</button>
  </div>

  <script>
    let loadingTimeout;
    let retryCount = 0;
    const maxRetries = 3;
    
    // 设置超时检测
    function startLoadingTimeout() {
      loadingTimeout = setTimeout(() => {
        showError('应用加载超时，请检查网络连接或重启应用');
        document.getElementById('retryButton').style.display = 'block';
      }, 30000); // 30秒超时
    }
    
    // 显示错误信息
    function showError(message) {
      clearTimeout(loadingTimeout);
      document.getElementById('errorMessage').textContent = message;
      document.getElementById('errorMessage').style.display = 'block';
      document.querySelector('.loading-spinner').style.display = 'none';
      document.querySelector('.loading-text').textContent = '加载失败';
    }
    
    // 重试加载
    function retryLoading() {
      if (retryCount >= maxRetries) {
        showError('已达到最大重试次数，请重启应用');
        document.getElementById('retryButton').disabled = true;
        return;
      }
      
      retryCount++;
      document.getElementById('errorMessage').style.display = 'none';
      document.getElementById('retryButton').style.display = 'none';
      document.querySelector('.loading-spinner').style.display = 'block';
      document.querySelector('.loading-text').textContent = '应用加载中...';
      document.querySelector('.loading-subtext').textContent = `重试中 (${retryCount}/${maxRetries})`;
      
      startLoadingTimeout();
      
      // 添加重试延迟，避免频繁请求
      const retryDelay = Math.min(1000 * retryCount, 3000); // 最多延迟3秒
      
      setTimeout(() => {
        // 在开发环境中，尝试重新加载开发服务器
        if (window.location.protocol === 'file:') {
          // 如果是文件协议，说明是开发环境，尝试加载开发服务器
          const possiblePorts = [5173, 5174, 5175];
          let portIndex = 0;
          
          function tryNextPort() {
            if (portIndex >= possiblePorts.length) {
              // 如果所有端口都尝试失败，重新加载当前页面
              window.location.reload();
              return;
            }
            
            const port = possiblePorts[portIndex];
            const testUrl = `http://localhost:${port}`;
            
            // 设置超时时间，避免长时间等待
            const controller = new AbortController();
            const timeoutId = setTimeout(() => controller.abort(), 2000);
            
            // 测试端口是否可用
            fetch(testUrl, { signal: controller.signal })
              .then(response => {
                clearTimeout(timeoutId);
                if (response.ok) {
                  // 端口可用，跳转到开发服务器
                  window.location.href = testUrl;
                } else {
                  // 端口不可用，尝试下一个
                  portIndex++;
                  setTimeout(tryNextPort, 500); // 添加端口间延迟
                }
              })
              .catch(() => {
                clearTimeout(timeoutId);
                // 端口不可用，尝试下一个
                portIndex++;
                setTimeout(tryNextPort, 500); // 添加端口间延迟
              });
          }
          
          tryNextPort();
        } else {
          // 如果不是文件协议，重新加载当前页面
          window.location.reload();
        }
      }, retryDelay);
    }
    
    // 绑定重试按钮事件
    document.getElementById('retryButton').addEventListener('click', retryLoading);
    
    // 开始加载计时
    startLoadingTimeout();
    
    // 尝试检测主应用是否已加载
    let checkCount = 0;
    const maxChecks = 60; // 最多检查60次（30秒）
    
    function checkMainApp() {
      checkCount++;
      
      // 检查是否有错误
      if (window.location.protocol === 'file:') {
        // 如果是文件协议，说明是开发环境，检查开发服务器是否可用
        const possiblePorts = [5173, 5174, 5175];
        let portIndex = 0;
        
        function tryNextPort() {
          if (portIndex >= possiblePorts.length) {
            // 如果检查次数过多，显示错误
            if (checkCount >= maxChecks) {
              showError('应用加载时间过长，请检查网络连接或重启应用');
              document.getElementById('retryButton').style.display = 'block';
            } else {
              // 继续检查
              setTimeout(checkMainApp, 500);
            }
            return;
          }
          
          const port = possiblePorts[portIndex];
          const testUrl = `http://localhost:${port}`;
          
          // 测试端口是否可用
          fetch(testUrl)
            .then(response => {
              if (response.ok) {
                // 端口可用，跳转到开发服务器
                window.location.href = testUrl;
              } else {
                // 端口不可用，尝试下一个
                portIndex++;
                tryNextPort();
              }
            })
            .catch(() => {
              // 端口不可用，尝试下一个
              portIndex++;
              tryNextPort();
            });
        }
        
        tryNextPort();
      } else {
        // 如果不是文件协议，检查本地index.html
        fetch('./index.html')
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            
            // 如果检查次数过多，显示错误
            if (checkCount >= maxChecks) {
              showError('应用加载时间过长，请检查网络连接或重启应用');
              document.getElementById('retryButton').style.display = 'block';
            } else {
              // 继续检查
              setTimeout(checkMainApp, 500);
            }
          })
          .catch(error => {
            showError(`加载失败: ${error.message}`);
            document.getElementById('retryButton').style.display = 'block';
          });
      }
    }
    
    // 开始检查
    setTimeout(checkMainApp, 1000);
    
    // 添加控制台日志
    console.log('加载页面已初始化');
  </script>
</body>
</html>